<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>学习猿地课程列表页</title>
  <style>
    body,
    ul,
    li,
    a {
      margin: 0px;
      padding: 0px;
      list-style: none;
      text-decoration: none;
    }

    body {
      background-color: #f4f4f4;
    }

    /* 头部样式 */
    header {
      width: 100%;
      height: 60px;
      background: #fff;
      margin-bottom: 20px;
      box-shadow: 0px 0px 5px 5px #ccc;
    }

    .top {
      width: 60%;
      height: 60px;
      margin: 0 auto;
      border: 1px solid green;
      display: flex;
      justify-content: space-between;
    }

    .top>section {
      border: 1px solid blue;
    }

    .top_left {
      flex-grow: 1;
    }

    .top_center {
      flex-grow: 5;
    }

    .top_right {
      flex-grow: 2;
    }

    /* 导航样式 */
    nav {
      width: 60%;
      height: 80px;
      margin: 0 auto;
      border: 1px solid green;
      background: #fff;
      box-shadow: 0px 5px 5px #ccc;
      border-radius: 10px;
      margin-bottom: 20px;
    }

    /* 内容样式 */
    #content {
      width: 60%;
      border: 1px solid blue;
      margin: 0 auto;
      margin-bottom: 20px;
    }

    .content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* border: 2px solid green; */
      /* height: 300px; */
    }

    .content>section {
      width: 20%;
      height: 200px;
      border: 1px solid green;
    }

    /* 分页效果 */
    #page{
      width: 60%;
      margin: 0 auto;
      border: 1px solid green;
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    #page>article{
      border: 1px solid red;
      padding: 8px 15px;
      margin-left: 5px;
    }

    /* 底部样式 */
    footer{
      background: #fff;
      height: 370px;
      margin: 0 auto;
    }
    .footer{
      width: 60%;
      border: 1px solid blue;
      height: 350px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }
    .footer_bottom{
      margin: 0 auto;
      width: 60%;
      height: 20px;
      text-align: center;
    }
    .footer_left{
      border: 1px solid red;
      flex-grow: 3;
    }
    .footer_center{
      border: 1px solid red;
      flex-grow: 5;
    }
    .footer_right{
      border: 1px solid red;
      flex-grow: 1;
    }

  </style>
</head>

<body>
  <header>
    <section class="top">
      <section class="top_left"><img src="img/" alt=""></section>
      <section class="top_center">1</section>
      <section class="top_right">1</section>
    </section>
  </header>
  <!-- 导航开始 -->
  <nav>

  </nav>

  <!-- 内容区域 -->
  <section id="content">
    <section class="content">
      <section>1</section>
      <section>2</section>
      <section>3</section>
      <section>4</section>
    </section>
    <section class="content">
      <section>1</section>
      <section>2</section>
      <section>3</section>
      <section>4</section>
    </section>
  </section>

  <!-- 分页 -->
  <section id="page">
    <article><a href="">1</a></article>
    <article><a href="">2</a></article>
    <article><a href="">3</a></article>
    <article><a href="">4</a></article>
    <article><a href="">5</a></article>
    <article><a href="">6</a></article>
  </section>

  <!-- 底部样式 -->
  <footer>
    <section class="footer">
      <section class="footer_left">1</section>
      <section class="footer_center">2</section>
      <section class="footer_right">3</section>
    </section>
    <section class="footer_bottom">1111</section>
  </footer>


</body>

</html>
